<template>
  <div class="lyric">{{ txt }}</div>
</template>
<script>
import { getLyricByMid } from "../service";
import { mapGetters } from "vuex";
import Lyric from "lyric-parser";
export default {
  data() {
    return {
      txt: "暂无歌词",
    };
  },
  props: ["paused"],
  computed: {
    ...mapGetters("player", ["curSong"]),
  },
  methods: {
    async initLyric(mid) {
      // mid可能不存在
      const { code, result } = (await getLyricByMid(mid)) || {};
      if (code) return;
      const str = result?.lyric;
      //   console.log(str);
      if (this.lyricObj) {
        // 如果对象存在 有一个歌词正在播放
        // 将上一个歌词停掉
        this.lyricObj.stop();
        this.lyricObj = null;
      }
      this.lyricObj = new Lyric(str, ({ txt }) => {
        this.txt = txt;
      });
      // console.log(this.lyricObj);
      this.lyricObj.play();
    },
    seek(time) {
      if (!this.lyricObj) return false;
      this.lyricObj.seek(time * 1000);
    },
  },
  async created() {
    // const { mid } = this.curSong;
  },
  watch: {
    // 歌曲发生改变重新获取歌词
    curSong: {
      immediate: true, // 初次监听
      handler(newV) {
        this.initLyric(newV.mid);
      },
    },
    paused(newV) {
      // 暂停状态 真停 假放
      if (newV) {
        this.lyricObj.stop();
      } else {
        this.lyricObj.play();
      }
    },
    // seek(newV) {
    //   this.lyricObj.seek(newV.time * 1000);
    // },
  },
};
</script>
<style lang="less" scoped>
@import "styles/index.less";
.lyric {
  z-index: 10;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #ffcd32;
  // .margin-top(20);
  .margin(50,30,0,30);
  // margin: 20px;
  .h(40);
  .w(315);
  // .margin-left(37.5);
  white-space: nowrap;
  overflow: hidden;
}
</style>
